<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog title="数据详情" v-model="props.dataDetailVisible" width="800" @close="cancel">
    <div class="data_detail">
      <div class="basic">
        <div class="title">基本信息</div>
        <div class="basic_item">
          <span>要素库类型：</span>
          <span>{{ dataBaseInfo?.name }}</span>
        </div>
        <div class="split"></div>
        <div class="basic_item"><span>技术元数据</span></div>
        <div class="rows">
          <div class="row_item">
            <span>数据库模式：</span> <span>{{ dataBaseInfo?.databaseSchema }}</span>
          </div>
          <div class="row_item">
            <span>访问权限：</span> <span>{{ dataBaseInfo?.permissions }}</span>
          </div>
          <div class="row_item">
            <span>数据格式：</span> <span>{{ dataBaseInfo?.databaseFormat }}</span>
          </div>
        </div>
        <div class="basic_item">
          <span>存储位置：</span>
          <span>{{ dataBaseInfo?.storageLocation }}</span>
        </div>
        <div class="split"></div>
        <div class="basic_item"><span>业务元数据</span></div>
        <div class="basic_item">
          <span>业务定义：</span>
          <span>xxxxxx</span>
        </div>
      </div>
      <div class="data_view">
        <div class="title">
          <span>数据信息</span>
          <el-tooltip content="点击查看数据血缘关系"
            ><el-icon size="14" class="view" @click="relationVisible = true"><View /></el-icon
          ></el-tooltip>
        </div>
      </div>
      <div class="table_data" v-for="item in tableList" :key="item.tableName">
        <el-table :data="item.data">
          <el-table-column v-for="col in item.colunms" :key="col" :prop="col.prop" :label="col.label" :fixed="col.fixed"></el-table-column>
        </el-table>
        <div class="pagenation" @click="pageClick(item)">
          <el-pagination
            v-show="item.total > 0"
            layout="prev, pager, next,jumper"
            v-model:page="pageNumObj[item.tableName]"
            limit="10"
            :total="item.total"
            @current-change="
              (num) => {
                pageNumObj[item.tableName] = num;
              }
            "
          />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="cancel"> 关闭 </el-button>
      </div>
    </template>
    <el-dialog title="数据血缘" v-model="relationVisible" @close="relationVisible = false" width="1200">
      <DataRelation v-if="relationVisible" :paramData="props.data" />
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" type="primary" @click="relationVisible = false"> 关闭 </el-button>
        </div>
      </template>
    </el-dialog>
  </el-dialog>
</template>
<script name="DataDetail" setup>
import DataRelation from './DataRelation.vue';
import { getDataBaseDetail, queryDataByTable, queryManagementIds } from '@/api/metaData/index';
import { tableQueryParams } from './dataTableConfig.js';

const props = defineProps(['dataDetailVisible', 'data']);
const emit = defineEmits(['handleEvent']);
const relationVisible = ref(false);
//tableList
const tableList = ref([]);
//数据库详情
const dataBaseInfo = ref(null);
//数据表
const tables = ref(null);
// 查询参数
const queryData = ref([]);
// 页码对象
const pageNumObj = ref({});
// const managementIds = ref([]);
const cancel = () => {
  emit('handleEvent');
};
// 翻页
const pageClick = (data) => {
  const param = queryData.value.filter((el) => {
    return el.tableName === data.tableName;
  });
  param[0].pageSize = 10;
  param[0].pageNum = pageNumObj.value[data.tableName];
  queryDataByTable(param[0]).then((res) => {
    if (res?.rows) {
      tableList.value.forEach((el) => {
        if (el.tableName === data.tableName) {
          el.data = res?.rows;
        }
      });
    }
  });
};

// 数据列表查询
const queryTableDatas = (managementIds) => {
  if (tables.value) {
    const tableArr = tables.value.split(',');
    tableArr.forEach((el) => {
      const returnArr = tableQueryParams.filter((item) => {
        return item.tableName === el;
      });
      const queryParams = {...returnArr[0]};
      const params = {};
      params.tableName = el;
      params.pageSize = 10;
      params.pageNum = 1;
      params.metadataManagementIds = managementIds;
      params.methodTpye = queryParams.methodTpye;
      params.uri = queryParams.uri;
      queryData.value.push(params);
      pageNumObj.value[el] = 1;
      queryDataByTable(params).then((res) => {
        if (res?.rows) {
          tableList.value.push({ tableName: el, total: res?.total, data: res?.rows, colunms: queryParams.columns });
        }
      });
    });
  }
};
const getDataBaseInfo = () => {
  getDataBaseDetail(props.data.databaseId).then((res) => {
    if (res) {
      dataBaseInfo.value = res?.data;
      tables.value = res?.data?.storageLocation;
      getManagementIds();
    }
  });
};
const getManagementIds = () => {
  queryManagementIds({ businessId: props.data.businessId, databaseId: props.data.databaseId }).then((res) => {
    if (res) {
      // 查询表格数据
      queryTableDatas(res?.data);
    }
  });
};
onMounted(() => {
  getDataBaseInfo();
});
</script>
<style lang="scss" scoped>
.data_detail {
  font-size: 12px;
  .basic {
    .title {
      background: #fafafa;
      height: 20px;
      line-height: 20px;
      font-weight: 600;
    }
    .basic_item {
      margin-top: 10px;
      > span:nth-child(2) {
        color: #909399;
      }
    }
    .split {
      width: 100%;
      height: 1px;
      background: #f4f4f4;
      margin-top: 10px;
    }
    .rows {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .row_item {
        width: 33%;
        > span:nth-child(2) {
          color: #909399;
        }
      }
    }
  }
  .data_view {
    margin-top: 20px;
    .title {
      background: #fafafa;
      height: 20px;
      line-height: 20px;
      font-weight: 600;
      display: flex;
      align-items: center;
      .view {
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .table_data {
    margin-top: 20px;
    .pagenation {
      display: flex;
      justify-content: end;
      margin-top: 10px;
    }
  }
}
</style>
